今日任務: 語音辨識，將語音轉成文字

前置作業

Browsersync

語音辨識一樣需在安全連線(像是https、localhost)下使用
可以看D19前置作業的部分查看詳細介紹

在終端機執行

npm install //安裝package.json內的套件(Browsersync)
npm start //啟動localserver(預設port3000)

Web Speech API

Web Speech API 提供了兩個不同的功能領域:

• 語音識別(speech recognition): 通過麥克風接收語音，將語音轉為文字的介面
• 語音合成(speech synthesis): 將文字合成為語音，並從音頻設備播放的介面。

設定全域環境的SpeechRecognition

前綴詞:

當有新的實驗性CSS 屬性或 JavaScript API出來時，不一定每個瀏覽器都已經支援，瀏覽器供應商會在實驗性CSS 屬性或 JavaScript API前面加上前綴詞，讓不同瀏覽器可以相容，例如:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

每個瀏覽器都有不同的前綴詞:

• -webkit-: Chrome、Safari、較新版本的 Opera 和 Edge，幾乎所有 iOS 瀏覽器，包括 Firefox for iOS；基本上，任何基於 WebKit 或 Chromium 的瀏覽器
• -moz-: 火狐
• -o-: 舊的 WebKit 之前的 Opera 版本
• -ms-: 在 Chromium 之前的 Internet Explorer 和 Microsoft Edge

SpeechRecognition:

瀏覽器支援:
對 Web Speech API 語音識別的支援目前只有於桌面版和 Android 版 Chrome(Chrome 從版本 33 開始就支援，但要加前綴詞)
webkitSpeechRecognition: 才能在Chrome上正常運作
SpeechRecognition: 未來可以不加前綴詞時也能正常運作
因此要寫:

//設定全域環境的SpeechRecognition
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

創一個新的SpeechRecognition物件

new SpeechRecognition():創一個新的SpeechRecognition物件來使用。
SpeechRecognition.interimResults:是否即時返回語音識別結果

const recognition = new SpeechRecognition();
recognition.interimResults= true;

新增一個段落

昨天有介紹createElement(tagName)可以建立指定元素，今天我們來建立<p>元素。
element.appendChild(aChild): 將一個節點添加到指定父節點的子節點列表的末尾。

const words=document.querySelector('.words')
let p =document.createElement('p')
words.appendChild(p) //在words這個div裡面末端加上p段落

監聽語音識別完成

SpeechRecognition: result event: 當SpeechRecognition已經將語音轉成文字後回傳result時觸發
recognition.start(): 啟動語音識別服務，收聽麥克風傳入的語音

recognition.addEventListener('result',(e)=>{
  console.log(e)
})

recognition.start()

這時講話console.log應該會有東西
看一下SpeechRecognition裡面的results有什麼

recognition.addEventListener('result',(e)=>{
  console.log(e.results)
})

recognition.start()

可以發現裡面很像陣列但不是陣列(沒有陣列方法可用)

再打開裡面還有一層(像俄羅斯娃娃)

• transcript:轉換的文字
• confidence:信心(0.89成正確率)
• isFinal:講話結束與否

將資料轉成陣列後(Array.from)用map帶出來，再轉成字串

recognition.addEventListener('result', (e) => {
    const transcript = Array.from(e.results)
        .map((result) => result[0])
        .map((result) => result.transcript)
        .join('');
    console.log(transcript);
});

監聽語音識別斷開

會發現講完話停止後，再講話就沒有繼續語音辨識，因為我們監聽的是"result"，收聽語音斷開後就不再監聽，所以要再監聽辨識斷開。
SpeechRecognition: end event: 當語音識別服務斷開時觸發。

recognition.addEventListener('end', recognition.start);

再將文字放到p裡面

recognition.addEventListener('result', (e) => {
    const transcript = Array.from(e.results)
        .map((result) => result[0])
        .map((result) => result.transcript)
        .join('');
    
    p.textContent = transcript
    console.log(transcript);
});

但重新講話就會覆蓋上一句的

如果isFinal 講話結束就新增p段落

recognition.addEventListener('result', (e) => {
   ...
   p.textContent = transcript;
   if (e.results[0].isFinal) {
       p = document.createElement('p');
       words.appendChild(p);
   }
   console.log(transcript);
);

也可以玩當你講'Apple'的時候就console很多蘋果

recognition.addEventListener('result', (e) => {
    ...
   if (transcript.includes('Apple')) {
       console.log('???????????');
   }
   console.log(transcript);
);

可以運用在語音控制:例如問時間、天氣的時候去執行相關的功能顯示在畫面上

今日學習到的:

• Web Speech API 提供了兩個不同的功能領域:
  • 語音識別(speech recognition): 通過麥克風接收語音，將語音轉為文字的介面
  • 語音合成(speech synthesis): 將文字合成為語音，並從音頻設備播放的介面。
• 前綴詞:當有新的實驗性CSS 屬性或 JavaScript API出來時，不一定每個瀏覽器都已經支援，瀏覽器供應商會在實驗性CSS 屬性或 JavaScript API前面加上前綴詞，讓不同瀏覽器可以相容。
• new SpeechRecognition():創一個新的SpeechRecognition物件來使用。
• SpeechRecognition.interimResults:是否即時返回語音識別結果。
• element.appendChild(aChild): 將一個節點添加到指定父節點的子節點列表的末尾。
• SpeechRecognition: result event: 當SpeechRecognition已經將語音轉成文字後回傳result時觸發。
• SpeechRecognition: end event: 當語音識別服務斷開時觸發。
• recognition.start(): 啟動語音識別服務，收聽傳入的音頻。

效果連結:連結
參考連結:
MDN: 前綴詞
MDN: Using the Web Speech API
MDN: SpeechRecognition
MDN: SpeechRecognition()
MDN: appendChild()
MDN: SpeechRecognition: result event